<template>
  <view class="pd32">
    <view class="image">
      <img
            class="tab-image"
            mode="widthFix"
            :src="require('@/static/image/no-access.png')"
            alt
          />
    </view>
    <view class="pdlr32 blue-view mg0">
        <button hover-class="btn-hover" open-type="getUserInfo"   @getuserinfo="bindGetUserInfo" lang="zh_CN">授权登录，获得更多精彩</button>
    </view>

  </view>
</template>

<script>
export default {
  data () {
    return {
    }
  },

  components: {
  },

  methods: {
    goIndex(){
        wx.reLaunch({
            url: '/pages/index/index'
        })
    },
    bindGetUserInfo(e) {
        const self = this;
        if (e.mp.detail.userInfo){

            console.log('用户按了允许授权按钮')
            let { encryptedData, userInfo, iv } = e.mp.detail;
            console.log(e.mp.detail)
            self.$http.post("/wxma/user/login",{
                    code: self.code,
                    userInfo:JSON.stringify(userInfo)
                }).then(res => {
                   self.$store.commit("USER_SET",{
                        unionId: res.data,
                        ...userInfo
                    })
                    wx.reLaunch({
                        url: '/pages/index/index'
                    })
                    // 获取到后台重写的session数据，可以通过vuex做本地保存
                }).catch(err => {
                    console.log(`自动请求api失败 err:`,err);
                })
        } else {
            //用户按了拒绝按钮
            console.log('用户按了拒绝按钮');
        }
    },
     wxGetUserInfo (code) {
        const self = this;
        wx.getUserInfo({
            withCredentials: true,
            success (res) {
                let { encryptedData,userInfo,iv } = res;

                self.$http.post("/wxma/user/login",{
                    code,
                    // userInfo:JSON.stringify(userInfo)
                }).then(res => {
                    console.log(`后台交互拿回数据:`,res);
                    self.$store.commit("USER_SET",{
                        unionId: res.data,
                        ...userInfo
                    })
                    wx.reLaunch({
                        url: '/pages/index/index'
                    })
                    // 获取到后台重写的session数据，可以通过vuex做本地保存
                }).catch(err => {
                    console.log(`自动请求api失败 err:`,err);
                })
            },
            fail (err) {
                console.log('自动wx.getUserInfo失败:',err);
                // 显示主动授权的button
                self.buttonVisible = true;
            }
        })
    },
  },
  mounted() {
    const self = this;
    // 如果 已经拿到用户信息，就直接跳转到首页
    if (this.$store.state?.userInfo?.token) {
        wx.reLaunch({
            url: '/pages/index/index'
        })
    }
    else{
        wx.login({
            success (res) {
                console.log(res, 'e21312')
                if (res.code){
                    self.code = res.code;
                    self.wxGetUserInfo(res.code);
                }
            },
        })
    }
  },
}
</script>

<style lang="stylus" scoped>
.pd32 {
    padding: 32rpx;
    color: #666;
    line-height: 40rpx;
}

.tab-image {
    width: 100%;
    margin: 20rpx 0;
}

.title {
    font-size: 30rpx;
    color: #333;
}

.fs30 {
    font-size: 30rpx;
}
</style>